import React,{ Component } from 'react';
import './clientNews.scss';
import '../../index/index.scss';
import { accountInfoDetails, editAccountInfoDetails } from 'api/clinetDetails.js';
import { DatePicker, message } from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
export default class ClientNews extends Component{
	constructor (props) {
		super(props)
		this.state={
			sex: '',
			mobile: '',
			email:'',
			account_company_name: '',
			address: '',
			birthday: '',
			account_source: '',
			account_name: ''
		}
	}
	goBack () { //返回上一级
		this._editAccountInfoDetails()
		this.props.history.goBack();
	}
	handleChange = (e) => {
    let key = e.target.name
    this.setState({[key]: e.target.value})
  }
  _editAccountInfoDetails () {//编辑客户资料详情
  	editAccountInfoDetails({
  		company_id: sessionStorage.getItem('company_id'),
  		account_user_id: this.props.location.state.account_user_id,
  		// account_user_id: 1,
  		sex: this.state.sex,
  		mobile: this.state.mobile,
  		email: this.state.email,
  		account_company_name: this.state.account_company_name,
  		address: this.state.address,
  		birthday: this.state.birthday
  	}).then(res => {
  		if(res.code === 1){
				message.success(res.message, 3, this.props.history.push({
					pathname: `${window.baseUrl}/clinetDetails`,
					state: {
						account_user_id: this.props.location.state.account_user_id
					}
				}));
  		} else {
  			message.error(res.message,3);
  		}
  	})
  }
  onChange (time, date) {
  	this.setState({
  		birthday: date
  	})
  }
	componentWillMount(){
		document.title = '资料详情'
		accountInfoDetails({//获得客户资料详情
			company_id: sessionStorage.getItem('company_id'),
			account_user_id: this.props.location.state.account_user_id 
			// account_user_id: 1
		}).then(res => {
			if(res.code === 1){
				this.setState({
					sex: res.data.sex,
					mobile: res.data.mobile,
					email:res.data.email,
					account_company_name: res.data.account_company_name,
					address: res.data.address,
					birthday: res.data.birthday,
					account_source: res.data.account_source,
					account_name: res.data.account_name
				})
			}
		})
		
	}
	render(){
		return(
			<div className="clientNews">
				{/*<div className="title">
					<div onClick={this.goBack.bind(this)}><i className="glyphicon glyphicon-left"></i></div>
					<div>资料详情</div>
					<div><i className="glyphicon glyphicon-options"></i></div>
				</div>*/}
				<div className="clientNews_title">已成为你的客户30天</div>
				<div className="clientNews_content">
					<p><span>来&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;源</span>{this.state.account_source}</p>
					<p><span>备&nbsp;注&nbsp;&nbsp;名</span>{this.state.account_name}</p>
					<p>
						<span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
						<input type="radio" name="sex" value='1' checked={this.state.sex ===1 ? "checked" : undefined} className="clientNews_sex" id="man" onChange={this.handleChange}/>
						<label htmlFor="man">男士</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sex" value='0' checked={this.state.sex ===0 ? "checked" : undefined} className="clientNews_sex" id="women" onChange={this.handleChange}/>
						<label htmlFor="women">女士</label>
					</p>
					<p><span>手机号码</span><input type="text" name="mobile" onChange={this.handleChange} value={this.state.mobile}/></p>
					<p><span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</span><input type="text" name="email" onChange={this.handleChange} value={this.state.email}/></p>
					<p><span>公司名称</span><input type="text" name="account_company_name" onChange={this.handleChange} value={this.state.account_company_name}/></p>
					<p><span>详细地址</span><input type="text" name="address" onChange={this.handleChange} value={this.state.address}/></p>
					<p><span style={{marginRight: "2rem"}}>生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span><i className="glyphicon glyphicon-calendar lala_icon"></i>
						<DatePicker
						  onChange={this.onChange.bind(this)}
						  format={'YYYY-MM-DD'}
						  locale={locale}
						  allowClear={false}
						  value={moment(this.state.birthday, "YYYY-MM-DD")}
						/>
					</p>
				</div>
				<div className="clientNews_btn" onClick={this._editAccountInfoDetails.bind(this)}>保存</div>
			</div>
		)
	}
}